<template>
  <example>
    <!-- <div class="wrap" id="testMap"></div> -->
    <xdh-map :zoom="8" ref="testMap" :center="[116.23, 39.54]" @ready="mapInit"></xdh-map>
  </example>
</template>

<script>
import {parseStyle} from '../../packages/index.js'
import Polygon from 'ol/geom/Polygon'
import Feature from 'ol/Feature'
const STYLE = parseStyle({
  className: 'Style',
  fill: {
    className: 'Fill',
    color: 'rgba(0,0,0,0.5)'
  },
  stroke: {
    className: 'Stroke',
    color: 'red',
    width: 2
  }
})
export default {
  data() {
    return {
      olMap: null,
      coor1: [
        [
          299.53125,
          -11.566143767762844
        ],
        [
          299.53125,
          -11.73830237143684
        ],
        [
          302.51953125,
          -15.919073517982413
        ],
        [
          306.298828125,
          -16.25686733062343
        ],
        [
          306.73828125,
          -11.221510260010541
        ],
        [
          299.53125,
          -11.566143767762844
        ]
      ],
      coor2: [
        [
          302.255859375,
          -30.372875188118016
        ],
        [
          302.080078125,
          -30.543338954230208
        ],
        [
          301.728515625,
          -30.92107637538488
        ],
        [
          300.849609375,
          -31.447410291428707
        ],
        [
          300.2783203125,
          -31.95216223802496
        ],
        [
          299.70703124999994,
          -32.41706632846282
        ],
        [
          300.05859375,
          -32.71335535317754
        ],
        [
          300.41015625,
          -33.100745405144245
        ],
        [
          301.17919921875,
          -33.54139466898275
        ],
        [
          302.18994140625,
          -33.669496972795535
        ],
        [
          303.134765625,
          -33.669496972795535
        ],
        [
          304.07958984375,
          -33.54139466898275
        ],
        [
          304.65087890625,
          -33.26624989076273
        ],
        [
          304.8486328125,
          -32.76880048488168
        ],
        [
          303.310546875,
          -32.58384932565661
        ],
        [
          302.89306640625,
          -32.026706293336126
        ],
        [
          303.22265625,
          -31.653381399663985
        ],
        [
          303.7060546875,
          -31.391157522824695
        ],
        [
          303.75,
          -31.01527898171125
        ],
        [
          303.75,
          -30.637912028341113
        ],
        [
          303.24462890625,
          -30.372875188118016
        ],
        [
          302.255859375,
          -30.372875188118016
        ]
      ],
      coor3: [
        [
          113.51451873779297,
          22.29354373265189
        ],
        [
          113.51348876953125,
          22.288778748027408
        ],
        [
          113.51039886474608,
          22.27607132828315
        ],
        [
          113.50833892822266,
          22.26304502477878
        ],
        [
          113.51486206054688,
          22.245886579877187
        ],
        [
          113.52275848388672,
          22.23190407053973
        ],
        [
          113.53683471679688,
          22.225865737519502
        ],
        [
          113.54885101318358,
          22.22332320371028
        ],
        [
          113.55674743652342,
          22.225865737519502
        ],
        [
          113.56430053710938,
          22.234446448737298
        ],
        [
          113.58043670654295,
          22.233810858511138
        ],
        [
          113.58627319335938,
          22.235717620542733
        ],
        [
          113.59107971191406,
          22.242708859367223
        ],
        [
          113.59176635742188,
          22.251288539302404
        ],
        [
          113.59142303466797,
          22.265269113666204
        ],
        [
          113.57975006103516,
          22.265904561141955
        ],
        [
          113.57597351074219,
          22.280519056557406
        ],
        [
          113.57391357421875,
          22.294179051660386
        ],
        [
          113.56876373291016,
          22.298626203841582
        ],
        [
          113.56327056884766,
          22.29132009337703
        ],
        [
          113.55056762695312,
          22.285919679279534
        ],
        [
          113.5378646850586,
          22.284013600962453
        ],
        [
          113.5275650024414,
          22.28274286764756
        ],
        [
          113.51451873779297,
          22.29354373265189
        ]
      ]
    }
  },
  methods: {
    polygonInit(data) {
      let polygon = new Polygon([data])
      // console.log(polygon)
      let polyFeature = new Feature(polygon)
      polyFeature.setStyle(STYLE)
      this.$refs.testMap.addFeature(polyFeature)

    },
    mapInit(map, vm) {
      // console.log(this)
      this.olMap = map
      // this.polygonInit(this.coor1)
      this.polygonInit(this.coor3)  
    }
  },
  mounted() {
    // console.log(STYLE)     
  }
}
</script>

<style scoped>
.wrap{
  width: 800px;
  height: 800px;
  border: 1px solid red;
}
</style>
